<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
      margin: 0;
    }

    main  {
      display: flex;
      width: 90vw;
      height: 80vh;
      gap:10px

    }

    main div {
      flex: 0.5;
      border-radius: 50px;
      color: #fff;
      cursor: pointer;
      margin: 10px;
      padding: 20px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      transition: all 700ms ease-in;
    }

    main div h1{
      opacity: 0;
      transition: opacity 0.3s ease-in 0.4s;
    }

    main div.active h1 {
      opacity: 1;
    }

    .active {
      flex: 5;  
    }
  </style>
</head>
<body>

  <main>
    <div class="active">
      <h1>1</h1>
    </div>

    <div>
      <h1>2</h1>
    </div>

    <div>
      <h1>3</h1>
    </div>

    <div>
      <h1>4</h1>
    </div>

    <div>
      <h1>5</h1>
    </div>
  </main>
  
</body>
<script>
  const images = [
  'https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
  'https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
  'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80',
  'https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80',
  'https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'
  ]
  const divs = document.querySelectorAll('div')
  divs.forEach((div, index) => {
    div.style.backgroundImage = `url(${images[index]})`
    div.addEventListener('click',(e) => {
      removeActive()
      e.target.classList.add('active')
    })
  })

  const removeActive = () => {
    divs.forEach(item => {
        item.classList.remove('active')
      })
  }
</script>
</html>